<template>
  <view class="content" v-if="goodInfo.goods_name">
    <!-- 轮播图区域 -->
    <swiper class="content-swiper" v-if="goodInfo.pics.length > 0" :indicator-dots="true" :autoplay="true"
      :interval="3000" :duration="1000" circular>
      <swiper-item class="content-swiper-item" v-for="(item, index) in goodInfo.pics" :key="index">
        <image :src="item.pics_big" @tap="previewImage(index)"></image>
      </swiper-item>
    </swiper>
    <!-- 默认图片 没有轮播图时显示 -->
    <image :src="defaultImage" class="content-defaultImage" v-else></image>
    <!-- 商品信息区域 -->
    <view class="content-info">
      <!-- 商品价格 -->
      <view class="content-info-price">
        ￥{{goodInfo.goods_price}}
      </view>
      <!-- 信息主体区域 -->
      <view class="content-info-body">
        <!-- 商品名称 -->
        <view class="name">
          {{goodInfo.goods_name}}
        </view>
        <!-- 收藏 -->
        <view class="collection">
          <uni-icons type="star" size="18" color="gray"></uni-icons>
          <text>收藏</text>
        </view>
        <!-- 运费 -->
        <view class="freight">快递：免运费</view>
      </view>
    </view>
    <!-- 商品详情信息 -->
    <rich-text :nodes="goodInfo.goods_introduce"></rich-text>
    <!-- 商品导航栏组件 -->
    <view class="content-nav">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
        @buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script>
  import {
    API_GoodDetail
  } from '@/api/API.js'
  import {
    TOAST_SHOW_FAIL,
    NAV_TAB
  } from '@/utils/view_utils.js'
  // 引入mapState，mapMutations方法
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        goodInfo: {},
        defaultImage: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png', // 没有图片时显示
        // 底部按钮数组 使用uni-goods-nav组件
        options: [{
          icon: 'shop',
          text: '店铺'
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0
        }],
        buttonGroup: [{
          text: '加入购物车',
          backgroundColor: '#ff0000',
          color: '#ffffff'
        }, {
          text: '立即购买',
          backgroundColor: '#ffa200',
          color: '#ffffff'
        }]
      };
    },
    watch: {
      // 监听total的变化，从而动态改变购物车按钮的info
      // 以下方法第一次不会变化，所以首次进入无法显示购物车商品的数量
      // total(newTotal) {
      //   this.options[1].info = newTotal;
      // }
      total: {
        handler(newTotal) {
          this.options[1].info = newTotal;
        },
        immediate: true
      }
    },
    computed: {
      // 引入vuex中m_cart模板中的cart变量
      ...mapState('m_cart', ['cart']),
      // 引入getters
      ...mapGetters('m_cart', ['total'])
    },
    onLoad(options) {
      this.getGoodDetail(options.goods_id);
    },
    methods: {
      // 把m_cart中的方法映射到当前页面
      ...mapMutations('m_cart',['addToCart']),
      // 根据商品id获取商品详情
      async getGoodDetail(goods_id) {
        const {
          data: res
        } = await API_GoodDetail({
          goods_id,
        })
        if (res.meta.status !== 200) return TOAST_SHOW_FAIL('请求商品信息失败');
        // 使用字符串的replace方法改变img中的行内样式以解决图片间隙问题
        // 解决webp格式图片无法在ios端正常显示的问题
        res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;"')
          .replace(/webp/g, 'jpg')
        this.goodInfo = res.message;
      },
      // 预览图片
      previewImage(index) {
        uni.previewImage({
          current: index,
          // 需要预览的所有图片连接数组
          urls: this.goodInfo.pics.map(x => x.pics_big)
        })
      },
      // 底部按钮的绑定事件

      // 左侧按钮
      onClick(e) {
        if (e.index === 1)
          NAV_TAB('/pages/cart/cart')
      },
      // 右侧按钮
      buttonClick(e) {
        
        if (e.index === 0){
          const goods = {
            goods_id: this.goodInfo.goods_id,
            goods_name: this.goodInfo.goods_name,
            goods_price: this.goodInfo.goods_price,
            goods_count: 1,
            goods_small_logo: this.goodInfo.goods_small_logo,
            goods_state: true
          }
          this.addToCart(goods)
        }
      },
    }
  }
</script>

<style lang="scss">
  .content {
    padding-bottom: 90rpx; // 底部导航栏占位

    &-swiper {
      &-item {
        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    &-defaultImage {
      width: 100%;
      height: 300rpx;
    }

    &-info {
      padding: 20rpx 0 20rpx 20rpx;

      &-price {
        color: #c00000;
        font-size: 36rpx;
        margin: 20rpx 0;
      }

      &-body {
        display: flex;
        justify-content: space-between;

        .name {
          font-size: 26rpx;
          padding-right: 20rpx;
        }

        .collection {
          width: 240rpx;
          font-size: 24rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-left: 2rpx solid #efefef;
          color: gray;
        }

        .freight {
          margin: 20rpx 0;
          font-size: 24rpx;
          color: gray;
        }
      }
    }

    &-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 90rpx;
    }
  }
</style>
